<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>__TITLE__</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="msapplication-tap-highlight" content="no">
		<meta content="telephone=no" name="format-detection">
		<link rel="stylesheet" href="__PUBLIC__/assets/css/normalize.css?6">
		<link rel="stylesheet" href="__PUBLIC__/assets/libs/mobilebone/mobilebone.css?6">
		<link rel="stylesheet" href="__PUBLIC__/assets/css/simapp.css?9">
		<link rel="stylesheet" href="__PUBLIC__/assets/css/simicon.css?6">
		<style type="text/css">
			body {
				background-color: #ddd;
			}
			.footer {
				border-top: solid 1px #eee;
			}
		</style>
	</head>

	<body>

		<!-- content start -->
		{__CONTENT__}
		<!-- content end -->

		<!-- 底部导航开始 -->
		<div class="footer footer-lg" ms-controller="footer">
			<div class="nav with-icon">
				<a ms-repeat="navLists" ms-attr-id="el.id" ms-class-active="el.active" ms-attr-href="el.href" data-rel="auto"><span ms-class="{{el.icon}}"></span>{{el.name}}</a>
			</div>
		</div>
		<!-- 底部导航结束 -->

		<script src="__PUBLIC__/assets/libs/mobilebone/mobilebone.js" charset="utf-8"></script>
		<script src="__PUBLIC__/assets/libs/iscroll/iscroll.js" charset="utf-8"></script>
		<script src="__PUBLIC__/assets/libs/avalon/avalon.mobile.js" charset="utf-8"></script>
		<script type="text/javascript">
			require.config({
				paths: {
					zepto: "../zepto/zepto.min.js",
				},
				shim: {
					zepto: {
						exports: "Zepto"
					},
				}
			});
			require(['zepto', "ready!"], function(Zepto) {
				var iscroll;
				iscroll = new IScroll(".container");
				Mobilebone.callback = function(pageIn, pageOut) {
					if (pageIn) {
						var pageInId = pageIn.getAttribute("id");
						$(".nav a").each(function() {
							$this = $(this);
							$this.removeClass("active");
							if ($this.attr("id") == "nav-" + pageInId) {
								$this.addClass("active");
							}
						});
						iscroll = new IScroll(pageIn.querySelector(".container"));
					}
				}
			});
		</script>
		<script type="text/javascript">
			var path = "{$path}";
			var navLists = [{
				id: "nav-page-home",
				href: "__MODULE__/Mall/index/sid/{$sid}",
				icon: "icon-home",
				name: "微信商城",
				active: path == "Mall/index"
			}, {
				id: "nav-page-try",
				href: "__MODULE__/MallTry/index/sid/{$sid}",
				icon: "icon-heart",
				name: "免费试用",
				active: path == "MallTry/index"
			}, {
				id: "nav-page-achivement",
				href: "__MODULE__/Mall/achivement/sid/{$sid}",
				icon: "icon-th-list",
				name: "我的业绩",
				active: path == "Mall/achivement"
			}, {
				id: "nav-page-my",
				href: "__MODULE__/Mall/my/sid/{$sid}",
				icon: "icon-personal",
				name: "个人中心",
				active: path == "Mall/my"
			}];
			avalon.define({
				$id: 'footer',
				navLists: navLists
			})
		</script>

	</body>

</html>